<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="main" style="width:800px;height:600px;" ></div>
<script src="./lib/echarts.min.js"></script>
<script>
// 数据
const foodArr=[
{name:"苹果",value:1330},
{name:"香蕉",value:104344},
{name:"火龙果",value:4310},
{name:"荔枝",value:1350},
{name:"榴莲",value:102343},
{name:"山竹",value:1560},
{name:"芭乐",value:1340},

]


const myChart=echarts.init(document.querySelector("#main"))
//绘图参数 配置项
const option={
    title:{
        text:"水果售价"
    },
    //图例组件
    legend:{
        right:'5%',
        data:["价格"]
    },
    //绘制网格
    grid:{
        left:'20%',
    },
    xAxis:{
        //类目数据
        data:foodArr.map(v=>v.name)
        //data:[xxxx,xxxxx，xxxxX，ZZZZ]
    },
    yAxis:{
        // y轴分割线
        splitLine:{
            lineStyle:{
                type:"dashed"
            }
            
        }
    
    },
   //提示框组件
tooltip:{
   // 触发方式 默认图形
trigger:'axis'
} ,
//系列列表
series:[
    {
        name:'价格',
        type:'bar',
        data:foodArr.map(v=>v.value)
    }
],



color:['#86cce9']
}

myChart.setOption(option)

</script>
</body>
</html>